import React from 'react';
import styles from './MyBonus.less';
import { connect } from 'dva';
import moment from 'moment';
import { List } from 'antd-mobile';
import Container from '../components/Base/Container';
import { Helmet } from 'react-helmet';
import { routerRedux } from 'dva/router';
import FilterControl from '../components/Base/FilterControl';
import ReactEcharts from '../components/Base/Echarts';

const Item = List.Item;

class MyBonus extends React.Component {

  componentWillMount() {
    let { branchPickerValue } = this.props.stat;
    branchPickerValue = branchPickerValue.length ? branchPickerValue : ['全部', moment().format('YYYY-MM')];
    this.filterControlsChange(branchPickerValue);
  }


  toPosition = (roles) => {
    if (roles.indexOf('salesman') !== -1) {
      return <span style={{ backgroundColor: 'rgb(59, 219, 59)' }} className={styles.position}>店员</span>;
    } else if (roles.indexOf('manager') !== -1) {
      return <span style={{ backgroundColor: 'rgb(130, 72, 238)' }} className={styles.position}>店长</span>;
    } else if (roles.indexOf('supervisor') !== -1) {
      return <span style={{ backgroundColor: 'rgb(239, 85, 60)' }} className={styles.position}>督导</span>;
    } else if (roles.indexOf('operator') !== -1) {
      return <span style={{ backgroundColor: 'rgb(252, 193, 35)' }} className={styles.position}>运营</span>;
    } else if (roles.indexOf('boss') !== -1) {
      return <span style={{ backgroundColor: 'rgb(241, 75, 122)' }} className={styles.position}>老板</span>;
    }
  };

  filterControlsChange = (v) => {
    const month = moment(v[1]).format('YYYY-MM');
    this.props.dispatch({
      type: 'bonus/fetchMyBonus',
      payload: { month },
    });
  }

  getOption = () => {
    if (!this.props.bonus.myBonus) return null;
    const { vip_bonus_money, bonus_money } = this.props.bonus.myBonus;

    const data = [
      { value: vip_bonus_money || 0, name: '拓客提成' },
      { value: bonus_money || 0, name: '销售提成' },
    ];
    const option = {
      color: ['#ffc000', '#6aa7da'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {d}%',
      },
      legend: {},
      series: [
        {
          name: '导购提成',
          type: 'pie',
          radius: '50%',
          // center: ['50%', '60%'],
          data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
          label: {
            normal: {
              // position: 'inside',
              formatter: '{b}\n{c}元',
            },

          },
        },
      ],
    };
    return <ReactEcharts option={option} style={{ height: '300px' }} />;
  }

  goToVipList = (month) => {
    month = moment(month).format('YYYY-MM');
    this.props.dispatch(routerRedux.push({ pathname: '/myBonusVips', query: { month } }));
  }

  render() {
    const { avatar, shopName, branchName, saleManName, username, roles } = this.props.auth.currentUser;
    const { branchPickerValue } = this.props.stat;
    const { total_money, bonus_money, vip_bonus_money, clsList, itemList } = this.props.bonus.myBonus;
    const bsetting = this.props.bonus.myBonus.bonus;

    return (
      <Container title="导购提成">
        <Helmet>
          <title>导购提成</title>
        </Helmet>
        <div className={styles.top}>
          <img src={avatar || require("../assets/avatar.png")} alt="" />
          <div className={styles.salesman}>
            <div>
              <span>{saleManName || username || ''}</span>
              {this.toPosition(roles)}
            </div>
            <div>{shopName}-{branchName}</div>
          </div>
          {/* <div>{moment().format('YYYY.MM')}</div>*/}
        </div>

        <FilterControl
          filterControlsChange={this.filterControlsChange} dispatch={this.props.dispatch}
          hidePickerBranch
        />

        {this.getOption()}

        <div className={styles.desc}>
          <div className={styles.words}>提成总计(元)</div>
          <div className={styles.total_bonus}>{total_money}</div>
        </div>

        <div className={styles.line}>
          <div className={styles.subLeft}>
            <div className={styles.sub1}>销售提成(元)</div>
            <div className={styles.sub2}>
              {bsetting && bsetting.sale_bonus && bsetting.sale_bonus.way === 1 ? '按系统规则比例提成' : '按重点品类或商品提成'}
            </div>
          </div>
          <div className={styles.subRight}>
            {bonus_money}
          </div>
        </div>
        <div className={styles.clear} />


        <table className={styles.line2}>
          {
          _.map(clsList, (v) => {
            return (<tr>
              <td className={styles.sub1}>{v.cls_name}</td>
              <td className={styles.sub2}>销售额{parseFloat((v.sale_money).toFixed(1))}元</td>
              <td className={styles.sub3}>提成{v.bonus_money}元</td>
            </tr>);
          })
        }
          {
          _.map(itemList, (v) => {
            return (<tr>
              <td className={styles.sub1}>{v.item_name}</td>
              <td className={styles.sub2}>销售额{parseFloat((v.sale_money).toFixed(1))}元</td>
              <td className={styles.sub3}>提成{v.bonus_money}元</td>
            </tr>);
          })
        }
        </table>


        <div className={styles.clear} />
        <div className={styles.line}>
          <div className={styles.subLeft}>
            <div className={styles.sub1}>拓客提成(元)</div>
            <div className={styles.sub2}>
              <a href="javascript:void(0)" onClick={e => this.goToVipList(branchPickerValue[1])}> 查看会员名单</a>
            </div>
          </div>
          <div className={styles.subRight}>
            {vip_bonus_money}
          </div>
        </div>
      </Container>
    );
  }
}

export default connect(({ auth, bonus, stat }) => ({ auth, bonus, stat }))(MyBonus);
